<template>
	<view class="visual-container">
		<!-- 测试说明阶段 -->
		<view class="instruction-stage" v-if="currentStage === 'instruction'">
			<view class="header">
				<text class="title">视觉记忆测试</text>
				<text class="subtitle">测试你的视觉记忆能力</text>
			</view>
			
			<view class="instruction-content">
				<view class="instruction-item">
					<view class="step-number">1</view>
					<text class="step-text">记住亮起的方块位置</text>
				</view>
				<view class="instruction-item">
					<view class="step-number">2</view>
					<text class="step-text">按相同顺序点击方块</text>
				</view>
				<view class="instruction-item">
					<view class="step-number">3</view>
					<text class="step-text">难度逐渐增加</text>
				</view>
			</view>
			
			<view class="difficulty-selector">
				<text class="selector-title">选择难度</text>
				<view class="difficulty-options">
					<view 
						class="difficulty-option" 
						v-for="level in difficultyLevels" 
						:key="level.id"
						:class="{ active: selectedDifficulty === level.id }"
						@click="selectDifficulty(level.id)"
					>
						<text class="option-name">{{ level.name }}</text>
						<text class="option-desc">{{ level.description }}</text>
					</view>
				</view>
			</view>
			
			<view class="stats-preview">
				<view class="stat-item">
					<text class="stat-label">最高分数</text>
					<text class="stat-value">{{ bestScore || 0 }}分</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">平均分数</text>
					<text class="stat-value">{{ averageScore || 0 }}分</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">测试次数</text>
					<text class="stat-value">{{ testCount }}次</text>
				</view>
			</view>
			
			<button class="start-btn" @click="startTest">开始测试</button>
		</view>
		
		<!-- 准备阶段 -->
		<view class="ready-stage" v-if="currentStage === 'ready'">
			<view class="ready-content">
				<text class="ready-text">准备开始</text>
				<text class="ready-subtitle">第 {{ currentLevel }} 关</text>
				<view class="countdown">{{ countdown }}</view>
			</view>
		</view>
		
		<!-- 显示阶段 -->
		<view class="display-stage" v-if="currentStage === 'display'">
			<view class="display-header">
				<text class="level-text">第 {{ currentLevel }} 关</text>
				<text class="sequence-text">记住亮起的顺序</text>
			</view>
			
			<view class="grid-container">
				<view 
					class="grid-item" 
					v-for="(item, index) in gridItems" 
					:key="index"
					:class="{ 
						active: item.isActive,
						showing: item.isShowing
					}"
				></view>
			</view>
			
			<view class="display-progress">
				<text class="progress-text">{{ displayIndex + 1 }}/{{ currentSequence.length }}</text>
				<view class="progress-bar">
					<view class="progress-fill" :style="{ width: ((displayIndex + 1) / currentSequence.length * 100) + '%' }"></view>
				</view>
			</view>
		</view>
		
		<!-- 输入阶段 -->
		<view class="input-stage" v-if="currentStage === 'input'">
			<view class="input-header">
				<text class="level-text">第 {{ currentLevel }} 关</text>
				<text class="input-text">按顺序点击方块</text>
			</view>
			
			<view class="grid-container">
				<view 
					class="grid-item clickable" 
					v-for="(item, index) in gridItems" 
					:key="index"
					:class="{ 
						clicked: item.isClicked,
						correct: item.isCorrect,
						wrong: item.isWrong
					}"
					@click="handleGridClick(index)"
				></view>
			</view>
			
			<view class="input-progress">
				<text class="progress-text">{{ userInput.length }}/{{ currentSequence.length }}</text>
				<view class="progress-bar">
					<view class="progress-fill" :style="{ width: (userInput.length / currentSequence.length * 100) + '%' }"></view>
				</view>
			</view>
			
			<view class="input-actions">
				<button class="reset-btn" @click="resetInput" v-if="userInput.length > 0">重置</button>
			</view>
		</view>
		
		<!-- 结果阶段 -->
		<view class="result-stage" v-if="currentStage === 'result'">
			<view class="result-content">
				<view class="result-header">
					<text class="result-title">第 {{ currentLevel }} 关结果</text>
					<view class="result-icon" :class="isCorrect ? 'success' : 'fail'">
						{{ isCorrect ? '✓' : '✗' }}
					</view>
				</view>
				
				<view class="result-details">
					<view class="detail-item">
						<text class="detail-label">正确率</text>
						<text class="detail-value">{{ Math.round(accuracy * 100) }}%</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">得分</text>
						<text class="detail-value">+{{ currentScore }}分</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">总分</text>
						<text class="detail-value">{{ totalScore }}分</text>
					</view>
				</view>
				
				<view class="result-feedback">
					<text class="feedback-text">{{ getFeedbackText() }}</text>
				</view>
				
				<view class="result-actions">
					<button class="continue-btn" @click="nextLevel" v-if="isCorrect">下一关</button>
					<button class="retry-btn" @click="retryLevel" v-else>重试</button>
					<button class="end-btn" @click="endTest">结束测试</button>
				</view>
			</view>
		</view>
		
		<!-- 最终结果阶段 -->
		<view class="final-result-stage" v-if="currentStage === 'final'">
			<view class="final-header">
				<text class="final-title">测试完成</text>
				<text class="final-subtitle">视觉记忆测试结果</text>
			</view>
			
			<view class="final-stats">
				<view class="main-stat">
					<text class="main-label">最终得分</text>
					<text class="main-value">{{ totalScore }}分</text>
					<text class="main-level">{{ getScoreLevel(totalScore) }}</text>
				</view>
				
				<view class="detail-stats">
					<view class="detail-item">
						<text class="detail-label">最高关卡</text>
						<text class="detail-value">第{{ maxLevel }}关</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">平均正确率</text>
						<text class="detail-value">{{ Math.round(averageAccuracy * 100) }}%</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">测试时长</text>
						<text class="detail-value">{{ formatTime(testDuration) }}</text>
					</view>
				</view>
			</view>
			
			<view class="level-results">
				<text class="list-title">关卡成绩</text>
				<view class="level-item" v-for="(result, index) in levelResults" :key="index">
					<text class="level-number">第{{ index + 1 }}关</text>
					<text class="level-accuracy">{{ Math.round(result.accuracy * 100) }}%</text>
					<text class="level-score">{{ result.score }}分</text>
					<view class="level-status" :class="result.passed ? 'passed' : 'failed'">
						{{ result.passed ? '通过' : '失败' }}
					</view>
				</view>
			</view>
			
			<view class="action-buttons">
				<button class="retry-btn" @click="resetTest">重新测试</button>
				<button class="home-btn" @click="goHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 测试状态
const currentStage = ref('instruction') // instruction, ready, display, input, result, final
const selectedDifficulty = ref(1)
const currentLevel = ref(1)
const maxLevel = ref(1)
const countdown = ref(3)
const totalScore = ref(0)
const currentScore = ref(0)
const isCorrect = ref(false)
const accuracy = ref(0)
const testStartTime = ref(0)
const testDuration = ref(0)

// 游戏数据
const gridSize = ref(16) // 4x4网格
const gridItems = ref([])
const currentSequence = ref([])
const userInput = ref([])
const displayIndex = ref(0)
const levelResults = ref([])

// 定时器
const displayTimer = ref(null)
const countdownTimer = ref(null)

// 历史数据
const bestScore = ref(null)
const averageScore = ref(null)
const testCount = ref(0)

// 难度配置
const difficultyLevels = ref([
	{ id: 1, name: '简单', description: '3-5个方块' },
	{ id: 2, name: '中等', description: '4-7个方块' },
	{ id: 3, name: '困难', description: '5-9个方块' }
])

// 计算属性
const averageAccuracy = computed(() => {
	if (levelResults.value.length === 0) return 0
	return levelResults.value.reduce((sum, result) => sum + result.accuracy, 0) / levelResults.value.length
})

// 页面加载时获取历史数据
onMounted(() => {
	loadHistoryData()
	initGrid()
})

// 页面卸载时清理定时器
onUnmounted(() => {
	clearAllTimers()
})

// 初始化网格
const initGrid = () => {
	gridItems.value = Array(gridSize.value).fill().map(() => ({
		isActive: false,
		isShowing: false,
		isClicked: false,
		isCorrect: false,
		isWrong: false
	}))
}

// 加载历史数据
const loadHistoryData = () => {
	try {
		const history = uni.getStorageSync('visualMemoryHistory')
		if (history) {
			bestScore.value = history.bestScore
			averageScore.value = history.averageScore
			testCount.value = history.testCount || 0
		}
	} catch (e) {
		console.error('加载历史数据失败:', e)
	}
}

// 保存测试结果
const saveTestResult = () => {
	try {
		const history = uni.getStorageSync('visualHistory') || []
		
		// 创建新的测试记录
		const newRecord = {
			score: totalScore.value,
			maxLevel: maxLevel.value,
			levelResults: [...levelResults.value],
			difficulty: selectedDifficulty.value,
			timestamp: new Date().toISOString(),
			date: new Date().toLocaleDateString('zh-CN'),
			testDuration: Math.round((Date.now() - testStartTime.value) / 1000)
		}
		
		// 添加到历史记录
		history.push(newRecord)
		
		// 保持最近50条记录
		if (history.length > 50) {
			history.shift()
		}
		
		uni.setStorageSync('visualHistory', history)
		
		// 触发成就系统检查
		triggerAchievementCheck()
		
		// 更新当前显示的数据
		const allScores = history.map(record => record.score)
		bestScore.value = Math.max(...allScores)
		averageScore.value = Math.round(allScores.reduce((sum, score) => sum + score, 0) / allScores.length)
		testCount.value = history.length
	} catch (e) {
		console.error('保存测试结果失败:', e)
	}
}

// 触发成就系统检查
const triggerAchievementCheck = () => {
	try {
		// 检查视觉记忆成就
		if (maxLevel.value >= 12) {
			const visualTrigger = {
				type: 'visual_memory',
				value: maxLevel.value,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('visualMemoryTrigger', visualTrigger)
		}
		
		// 检查测试完成成就
		const testCompleteTrigger = {
			type: 'test_completed',
			value: 1,
			timestamp: new Date().toISOString()
		}
		uni.setStorageSync('testCompleteTrigger', testCompleteTrigger)
		
		// 检查完美分数成就（达到16个图形）
		if (maxLevel.value >= 16) {
			const perfectTrigger = {
				type: 'perfect_score',
				value: 1,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('perfectScoreTrigger', perfectTrigger)
		}
		
		// 检查时间相关成就
		const currentHour = new Date().getHours()
		if (currentHour >= 22 || currentHour <= 6) {
			const nightTrigger = {
				type: 'night_test',
				value: 1,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('nightTestTrigger', nightTrigger)
		} else if (currentHour >= 5 && currentHour <= 8) {
			const earlyTrigger = {
				type: 'early_test',
				value: 1,
				timestamp: new Date().toISOString()
			}
			uni.setStorageSync('earlyTestTrigger', earlyTrigger)
		}
	} catch (e) {
		console.error('触发成就检查失败:', e)
	}
}

// 清理所有定时器
const clearAllTimers = () => {
	if (displayTimer.value) {
		clearTimeout(displayTimer.value)
		displayTimer.value = null
	}
	if (countdownTimer.value) {
		clearInterval(countdownTimer.value)
		countdownTimer.value = null
	}
}

// 选择难度
const selectDifficulty = (level) => {
	selectedDifficulty.value = level
}

// 开始测试
const startTest = () => {
	currentStage.value = 'ready'
	currentLevel.value = 1
	maxLevel.value = 1
	totalScore.value = 0
	levelResults.value = []
	testStartTime.value = Date.now()
	startCountdown()
}

// 开始倒计时
const startCountdown = () => {
	countdown.value = 3
	countdownTimer.value = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
			clearInterval(countdownTimer.value)
			startDisplayStage()
		}
	}, 1000)
}

// 开始显示阶段
const startDisplayStage = () => {
	currentStage.value = 'display'
	generateSequence()
	displayIndex.value = 0
	resetGrid()
	displaySequence()
}

// 生成序列
const generateSequence = () => {
	const difficulty = difficultyLevels.value.find(d => d.id === selectedDifficulty.value)
	let sequenceLength
	
	switch (selectedDifficulty.value) {
		case 1: // 简单
			sequenceLength = Math.min(3 + currentLevel.value - 1, 5)
			break
		case 2: // 中等
			sequenceLength = Math.min(4 + currentLevel.value - 1, 7)
			break
		case 3: // 困难
			sequenceLength = Math.min(5 + currentLevel.value - 1, 9)
			break
	}
	
	// 生成不重复的随机序列
	const sequence = []
	while (sequence.length < sequenceLength) {
		const randomIndex = Math.floor(Math.random() * gridSize.value)
		if (!sequence.includes(randomIndex)) {
			sequence.push(randomIndex)
		}
	}
	
	currentSequence.value = sequence
}

// 重置网格
const resetGrid = () => {
	gridItems.value.forEach(item => {
		item.isActive = false
		item.isShowing = false
		item.isClicked = false
		item.isCorrect = false
		item.isWrong = false
	})
}

// 显示序列
const displaySequence = () => {
	if (displayIndex.value >= currentSequence.value.length) {
		// 显示完成，进入输入阶段
		setTimeout(() => {
			startInputStage()
		}, 500)
		return
	}
	
	const currentIndex = currentSequence.value[displayIndex.value]
	gridItems.value[currentIndex].isShowing = true
	
	displayTimer.value = setTimeout(() => {
		gridItems.value[currentIndex].isShowing = false
		displayIndex.value++
		
		setTimeout(() => {
			displaySequence()
		}, 200)
	}, 800)
}

// 开始输入阶段
const startInputStage = () => {
	currentStage.value = 'input'
	userInput.value = []
	resetGrid()
}

// 处理网格点击
const handleGridClick = (index) => {
	if (gridItems.value[index].isClicked) return
	
	gridItems.value[index].isClicked = true
	userInput.value.push(index)
	
	// 检查是否正确
	const currentStep = userInput.value.length - 1
	const isStepCorrect = currentSequence.value[currentStep] === index
	
	if (isStepCorrect) {
		gridItems.value[index].isCorrect = true
	} else {
		gridItems.value[index].isWrong = true
	}
	
	// 检查是否完成输入
	if (userInput.value.length >= currentSequence.value.length) {
		setTimeout(() => {
			checkResult()
		}, 500)
	}
}

// 重置输入
const resetInput = () => {
	userInput.value = []
	resetGrid()
}

// 检查结果
const checkResult = () => {
	let correctCount = 0
	for (let i = 0; i < currentSequence.value.length; i++) {
		if (userInput.value[i] === currentSequence.value[i]) {
			correctCount++
		}
	}
	
	accuracy.value = correctCount / currentSequence.value.length
	isCorrect.value = accuracy.value === 1
	
	// 计算得分
	currentScore.value = Math.round(correctCount * 10 * selectedDifficulty.value * currentLevel.value)
	totalScore.value += currentScore.value
	
	// 记录关卡结果
	levelResults.value.push({
		level: currentLevel.value,
		accuracy: accuracy.value,
		score: currentScore.value,
		passed: isCorrect.value
	})
	
	currentStage.value = 'result'
}

// 下一关
const nextLevel = () => {
	currentLevel.value++
	maxLevel.value = Math.max(maxLevel.value, currentLevel.value)
	currentStage.value = 'ready'
	startCountdown()
}

// 重试关卡
const retryLevel = () => {
	currentStage.value = 'ready'
	startCountdown()
}

// 结束测试
const endTest = () => {
	testDuration.value = Date.now() - testStartTime.value
	currentStage.value = 'final'
	saveTestResult()
}

// 重置测试
const resetTest = () => {
	clearAllTimers()
	currentStage.value = 'instruction'
	currentLevel.value = 1
	maxLevel.value = 1
	totalScore.value = 0
	levelResults.value = []
	userInput.value = []
	resetGrid()
}

// 返回首页
const goHome = () => {
	uni.navigateBack()
}

// 获取反馈文本
const getFeedbackText = () => {
	if (accuracy.value === 1) {
		return '完美！全部正确！'
	} else if (accuracy.value >= 0.8) {
		return '很好！大部分正确！'
	} else if (accuracy.value >= 0.6) {
		return '不错！继续努力！'
	} else {
		return '需要更多练习！'
	}
}

// 获取分数等级
const getScoreLevel = (score) => {
	if (score >= 500) return '大师级'
	if (score >= 300) return '专家级'
	if (score >= 200) return '熟练级'
	if (score >= 100) return '入门级'
	return '新手级'
}

// 格式化时间
const formatTime = (ms) => {
	const seconds = Math.floor(ms / 1000)
	const minutes = Math.floor(seconds / 60)
	const remainingSeconds = seconds % 60
	return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}
</script>

<style lang="scss" scoped>
.visual-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
}

// 说明阶段样式
.instruction-stage {
	flex: 1;
	padding: 40rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	display: flex;
	flex-direction: column;
	overflow-y: auto;

	.header {
		text-align: center;
		margin-bottom: 40rpx;
		
		.title {
			font-size: 48rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 16rpx;
		}
		
		.subtitle {
			font-size: 28rpx;
			opacity: 0.9;
			display: block;
		}
	}
	
	.instruction-content {
		margin-bottom: 40rpx;
		
		.instruction-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.step-number {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: rgba(255, 255, 255, 0.2);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: bold;
				margin-right: 30rpx;
			}
			
			.step-text {
				font-size: 30rpx;
			}
		}
	}
	
	.difficulty-selector {
		margin-bottom: 40rpx;
		
		.selector-title {
			font-size: 32rpx;
			font-weight: bold;
			display: block;
			text-align: center;
			margin-bottom: 30rpx;
		}
		
		.difficulty-options {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			
			.difficulty-option {
				padding: 30rpx;
				background: rgba(255, 255, 255, 0.1);
				border: 2rpx solid rgba(255, 255, 255, 0.2);
				border-radius: 20rpx;
				text-align: center;
				transition: all 0.3s ease;
				
				&.active {
					background: rgba(255, 255, 255, 0.2);
					border-color: rgba(255, 255, 255, 0.5);
					transform: scale(1.02);
				}
				
				.option-name {
					font-size: 32rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 8rpx;
				}
				
				.option-desc {
					font-size: 24rpx;
					opacity: 0.8;
					display: block;
				}
			}
		}
	}
	
	.stats-preview {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		
		.stat-item {
			text-align: center;
			
			.stat-label {
				font-size: 24rpx;
				opacity: 0.8;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.stat-value {
				font-size: 32rpx;
				font-weight: bold;
				display: block;
			}
		}
	}
	
	.start-btn {
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.2);
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 50rpx;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: auto;
		
		&:active {
			opacity: 0.8;
		}
	}
}

// 准备阶段样式
.ready-stage {
	flex: 1;
	background: #4CAF50;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	
	.ready-content {
		text-align: center;
		
		.ready-text {
			font-size: 48rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 20rpx;
		}
		
		.ready-subtitle {
			font-size: 28rpx;
			opacity: 0.9;
			display: block;
			margin-bottom: 40rpx;
		}
		
		.countdown {
			font-size: 120rpx;
			font-weight: bold;
			animation: pulse 1s infinite;
		}
	}
}

// 显示阶段样式
.display-stage {
	flex: 1;
	padding: 40rpx;
	background: #2196F3;
	color: white;
	display: flex;
	flex-direction: column;
	
	.display-header {
		text-align: center;
		margin-bottom: 40rpx;
		
		.level-text {
			font-size: 32rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 10rpx;
		}
		
		.sequence-text {
			font-size: 24rpx;
			opacity: 0.9;
			display: block;
		}
	}
	
	.grid-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		max-width: 600rpx;
		margin: 0 auto 40rpx;
		flex: 1;
		align-content: center;
		
		.grid-item {
			aspect-ratio: 1;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 15rpx;
			transition: all 0.3s ease;
			
			&.showing {
				background: #FFD700;
				transform: scale(1.1);
				box-shadow: 0 0 30rpx rgba(255, 215, 0, 0.6);
			}
		}
	}
	
	.display-progress {
		text-align: center;
		
		.progress-text {
			font-size: 28rpx;
			display: block;
			margin-bottom: 20rpx;
		}
		
		.progress-bar {
			height: 8rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 4rpx;
			overflow: hidden;
			
			.progress-fill {
				height: 100%;
				background: #FFD700;
				transition: width 0.3s ease;
			}
		}
	}
}

// 输入阶段样式
.input-stage {
	flex: 1;
	padding: 40rpx;
	background: #FF9800;
	color: white;
	display: flex;
	flex-direction: column;
	
	.input-header {
		text-align: center;
		margin-bottom: 40rpx;
		
		.level-text {
			font-size: 32rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 10rpx;
		}
		
		.input-text {
			font-size: 24rpx;
			opacity: 0.9;
			display: block;
		}
	}
	
	.grid-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		max-width: 600rpx;
		margin: 0 auto 40rpx;
		flex: 1;
		align-content: center;
		
		.grid-item {
			aspect-ratio: 1;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 15rpx;
			transition: all 0.3s ease;
			
			&.clickable {
				cursor: pointer;
				
				&:hover {
					background: rgba(255, 255, 255, 0.3);
				}
			}
			
			&.clicked {
				transform: scale(0.95);
			}
			
			&.correct {
				background: #4CAF50;
				box-shadow: 0 0 20rpx rgba(76, 175, 80, 0.6);
			}
			
			&.wrong {
				background: #f44336;
				box-shadow: 0 0 20rpx rgba(244, 67, 54, 0.6);
			}
		}
	}
	
	.input-progress {
		text-align: center;
		margin-bottom: 20rpx;
		
		.progress-text {
			font-size: 28rpx;
			display: block;
			margin-bottom: 20rpx;
		}
		
		.progress-bar {
			height: 8rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 4rpx;
			overflow: hidden;
			
			.progress-fill {
				height: 100%;
				background: white;
				transition: width 0.3s ease;
			}
		}
	}
	
	.input-actions {
		text-align: center;
		
		.reset-btn {
			width: 200rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0.2);
			border: 2rpx solid rgba(255, 255, 255, 0.3);
			border-radius: 30rpx;
			color: white;
			font-size: 24rpx;
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}

// 结果阶段样式
.result-stage {
	flex: 1;
	padding: 40rpx;
	background: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	.result-content {
		text-align: center;
		
		.result-header {
			margin-bottom: 40rpx;
			
			.result-title {
				font-size: 32rpx;
				color: #666;
				display: block;
				margin-bottom: 20rpx;
			}
			
			.result-icon {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 60rpx;
				font-weight: bold;
				margin: 0 auto;
				
				&.success {
					background: #4CAF50;
					color: white;
				}
				
				&.fail {
					background: #f44336;
					color: white;
				}
			}
		}
		
		.result-details {
			display: flex;
			justify-content: space-around;
			margin-bottom: 40rpx;
			
			.detail-item {
				text-align: center;
				
				.detail-label {
					font-size: 24rpx;
					color: #666;
					display: block;
					margin-bottom: 8rpx;
				}
				
				.detail-value {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					display: block;
				}
			}
		}
		
		.result-feedback {
			margin-bottom: 40rpx;
			
			.feedback-text {
				font-size: 28rpx;
				color: #333;
				display: block;
			}
		}
		
		.result-actions {
			display: flex;
			gap: 20rpx;
			
			.continue-btn, .retry-btn, .end-btn {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				font-weight: bold;
				border: none;
				
				&:active {
					opacity: 0.8;
				}
			}
			
			.continue-btn {
				background: #4CAF50;
				color: white;
			}
			
			.retry-btn {
				background: #FF9800;
				color: white;
			}
			
			.end-btn {
				background: #666;
				color: white;
			}
		}
	}
}

// 最终结果阶段样式
.final-result-stage {
	flex: 1;
	padding: 40rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	overflow-y: auto;
	
	.final-header {
		text-align: center;
		margin-bottom: 40rpx;
		
		.final-title {
			font-size: 48rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 16rpx;
		}
		
		.final-subtitle {
			font-size: 28rpx;
			opacity: 0.9;
			display: block;
		}
	}
	
	.final-stats {
		margin-bottom: 40rpx;
		
		.main-stat {
			text-align: center;
			margin-bottom: 30rpx;
			padding: 30rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 20rpx;
			
			.main-label {
				font-size: 28rpx;
				opacity: 0.8;
				display: block;
				margin-bottom: 10rpx;
			}
			
			.main-value {
				font-size: 64rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 10rpx;
			}
			
			.main-level {
				font-size: 32rpx;
				display: block;
			}
		}
		
		.detail-stats {
			display: flex;
			justify-content: space-between;
			gap: 20rpx;
			
			.detail-item {
				flex: 1;
				text-align: center;
				padding: 20rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 15rpx;
				
				.detail-label {
					font-size: 22rpx;
					opacity: 0.8;
					display: block;
					margin-bottom: 8rpx;
				}
				
				.detail-value {
					font-size: 28rpx;
					font-weight: bold;
					display: block;
				}
			}
		}
	}
	
	.level-results {
		margin-bottom: 40rpx;
		
		.list-title {
			font-size: 32rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 20rpx;
			text-align: center;
		}
		
		.level-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			margin-bottom: 15rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			
			.level-number {
				font-size: 28rpx;
				flex: 1;
			}
			
			.level-accuracy {
				font-size: 28rpx;
				flex: 1;
				text-align: center;
			}
			
			.level-score {
				font-size: 28rpx;
				flex: 1;
				text-align: center;
			}
			
			.level-status {
				flex: 1;
				text-align: right;
				font-size: 24rpx;
				padding: 8rpx 16rpx;
				border-radius: 12rpx;
				
				&.passed {
					background: #4CAF50;
					color: white;
				}
				
				&.failed {
					background: #f44336;
					color: white;
				}
			}
		}
	}
	
	.action-buttons {
		display: flex;
		gap: 20rpx;
		
		.retry-btn, .home-btn {
			flex: 1;
			height: 80rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.3);
			border-radius: 40rpx;
			color: white;
			font-size: 28rpx;
			font-weight: bold;
			background: rgba(255, 255, 255, 0.1);
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}

// 动画效果
@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.1); opacity: 0.7; }
}
</style>
